<template>
    <div v-loading="loading">
        <keyHeader ref="keyHeader" :data="data" :keyType="keyType"></keyHeader>

        <div class="addNewLine-btn"><el-button type="primary" @click="editDialogVisible=true;editFormParam={}">{{$t('publicFeedback.addNewLine')}}</el-button></div>

        <el-table :data="setList" border style="width: 100%" class="redisDataTable">
            <el-table-column type="index" label="index" width="180"> </el-table-column>
            <el-table-column label="Member" width="180" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-popover placement="top-start" trigger="hover" width="400" :content="scope.row.substring(0,500)+'...'">
                    <span slot="reference" style='white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'>{{scope.row.substring(0,200)}}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column>   
                <template slot="header" slot-scope="scope">
                    <el-input v-model="searchTxt" size="mini" @keyup.enter.native="search(searchTxt)" :placeholder="$t('aside.PleaseEnter')+'('+$t('publicFeedback.EnterKeyStartSreach')+')'"/>
                </template>
                <template slot-scope="scope">
                    <el-button type="warning" icon="el-icon-edit" circle  size="small" @click="editLineClick(scope)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle  size="small" @click="delSetLine(scope)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="loadMore">
            <el-button :disabled="loadDoNone" @click="loadMore">{{$t('aside.loadMore')}}</el-button>
        </div>

        <!-- 编辑弹框 -->
        <editSetLineDialog :editDialogVisible="editDialogVisible" :editFormParam="editFormParam" 
        @hideDialog="editDialogVisible=false" @saveSet="editSetLine"></editSetLineDialog>

    </div>
</template>

<script>
import keyHeader from './keyHeader'
import editSetLineDialog from '@/components/dialog/editSetLineDialog'
export default {
    components:{
        keyHeader,editSetLineDialog
    },
    props:["data","keyType"],
    data(){
      return {
        options:{
          match:"*",
          count:200
        },
        editDialogVisible:false,
        searchTxt:"",
        setList:[],
        stream:{},
        PausePoint:0,
        loadDoNone:false,
        editFormParam:{},
        loading:true
      }
    },
    created(){
      this.init();
    },
    methods:{
      //初始化
      init(){
        this.refushSetList();
      },
      //刷新列表
      refushSetList(){
        const self=this;
        self.setList=[];
        let stream=this.data.redisClient.sscanStream(this.data.key,this.options);
        this.stream=stream;
        self.loading=true
        stream.on('data',function(list){
            self.setList=self.setList.concat(list)
            self.PausePoint+=list.length
            //每满足200+以上则暂停
            if(self.PausePoint>=self.options.count){
                stream.pause();
                self.PausePoint=0;
                self.loading=false
            }
        })
        stream.on('end',function(){
            self.loadDoNone=true
            self.stream=null
            self.loading=false
        })
      },
      //加载更多
      loadMore(){
        this.stream.resume();
      },
      //搜索
      search(searchTxt){
          this.options.match=searchTxt==="*"?"*":"*"+searchTxt+"*"
          this.refushSetList();
      },
      editLineClick(scope){
        this.editFormParam=scope
        this.editDialogVisible=true
      },
      //删除一行
      delSetLine(scope){
        this.$confirm(this.$t("publicFeedback.delLineTips"),this.$t("aside.tips"),{
          confirmButtonText: this.$t('aside.determine'),
          cancelButtonText: this.$t('aside.cancel'),
          cancelButtonClass: "btn-custom-cancel",
          type: 'warning'
        }).then(()=>{
          this.data.redisClient.srem(this.data.key,scope.row).then((res)=>{
              if(res===1){
                  this.setList.splice(scope.$index,1)
              }
              this.$message.success({
                  message:this.$t('publicFeedback.delSuccess')
              })
          }).catch((e)=>{
              this.$message.error({
                  message:e.message
              })
          })
        }).catch(()=>{})
      },
      //编辑一行
      editSetLine(oldValue,newValue){
        this.data.redisClient.sadd(this.data.key,newValue).then((res)=>{
          if(res>0){
            if(oldValue){
              this.data.redisClient.srem(this.data.key,oldValue.row).then((res)=>{
                if(res===1){
                  this.$set(this.setList,oldValue.$index,newValue)
                }
              }).catch((e)=>{
                  this.$message.error({
                    message:e.message
                  })
              })
            }else{
              this.setList.push(newValue)
            }
            this.$message.success({
              message:this.$t('publicFeedback.saveSuccess')
            })
            if(this.data.type==="addKey"){
              this.$eventBus.$emit("refushKeyList",{client:this.data.redisClient,type:"add",key:this.data.key})
              this.$eventBus.$emit("reloadKeyWindow",{client:this.data.redisClient})
              this.$refs.keyHeader.init();
            }
            //隐藏窗口
            this.editDialogVisible=false;
          }
        }).catch((e)=>{
          this.$message.error({
            message:e.message
          })
        })
      }
    },
    watch:{
        data(newValue,oldValue){
            this.init()
        }
    }
}
</script>